'use client';

import { useEffect, useRef } from 'react';
import styled from 'styled-components';

const ParticlesContainer = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
`;

const Canvas = styled.canvas`
  display: block;
  width: 100%;
  height: 100%;
`;

interface Particle {
  x: number;
  y: number;
  size: number;
  color: string;
  speedX: number;
  speedY: number;
}

const ParticlesBg = () => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const particles = useRef<Particle[]>([]);
  const mouse = useRef({ x: 0, y: 0, radius: 100 });

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    
    const ctx = canvas.getContext('2d');
    if (!ctx) return;
    
    // 设置canvas尺寸为窗口大小
    const resizeCanvas = () => {
      if (!canvas) return;
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      initParticles();
    };
    
    // 监听窗口大小变化
    window.addEventListener('resize', resizeCanvas);
    resizeCanvas();
    
    // 鼠标移动事件
    const handleMouseMove = (e: MouseEvent) => {
      mouse.current.x = e.clientX;
      mouse.current.y = e.clientY;
    };
    
    window.addEventListener('mousemove', handleMouseMove);
    
    // 生成粒子
    function initParticles() {
      if (!canvas) return;
      particles.current = [];
      const particleCount = Math.min(150, Math.floor((canvas.width * canvas.height) / 9000));
      
      for (let i = 0; i < particleCount; i++) {
        const size = Math.random() * 3 + 1;
        const x = Math.random() * canvas.width;
        const y = Math.random() * canvas.height;
        const speedX = Math.random() * 1 - 0.5;
        const speedY = Math.random() * 1 - 0.5;
        const brightness = Math.random() * 50 + 50;
        const color = `rgba(24, 144, 255, ${brightness / 100})`;
        
        particles.current.push({
          x,
          y,
          size,
          color,
          speedX,
          speedY
        });
      }
    }
    
    // 绘制粒子
    function drawParticles() {
      if (!canvas || !ctx) return;
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      for (let i = 0; i < particles.current.length; i++) {
        const p = particles.current[i];
        
        // 更新粒子位置
        p.x += p.speedX;
        p.y += p.speedY;
        
        // 边界处理
        if (p.x < 0 || p.x > canvas.width) {
          p.speedX = -p.speedX;
        }
        
        if (p.y < 0 || p.y > canvas.height) {
          p.speedY = -p.speedY;
        }
        
        // 与鼠标交互
        const dx = mouse.current.x - p.x;
        const dy = mouse.current.y - p.y;
        const distance = Math.sqrt(dx * dx + dy * dy);
        
        if (distance < mouse.current.radius) {
          const angle = Math.atan2(dy, dx);
          const force = (mouse.current.radius - distance) / mouse.current.radius;
          p.x -= Math.cos(angle) * force * 2;
          p.y -= Math.sin(angle) * force * 2;
        }
        
        // 粒子之间连线
        for (let j = i + 1; j < particles.current.length; j++) {
          const p2 = particles.current[j];
          const dx = p.x - p2.x;
          const dy = p.y - p2.y;
          const distance = Math.sqrt(dx * dx + dy * dy);
          
          if (distance < 120) {
            ctx.beginPath();
            ctx.strokeStyle = `rgba(24, 144, 255, ${(120 - distance) / 120 * 0.5})`;
            ctx.lineWidth = 1;
            ctx.moveTo(p.x, p.y);
            ctx.lineTo(p2.x, p2.y);
            ctx.stroke();
          }
        }
        
        // 绘制粒子
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
        ctx.fillStyle = p.color;
        ctx.fill();
      }
    }
    
    // 动画循环
    let animationFrameId: number;
    
    const animate = () => {
      drawParticles();
      animationFrameId = window.requestAnimationFrame(animate);
    };
    
    animate();
    
    // 清理
    return () => {
      window.cancelAnimationFrame(animationFrameId);
      window.removeEventListener('resize', resizeCanvas);
      window.removeEventListener('mousemove', handleMouseMove);
    };
  }, []);
  
  return (
    <ParticlesContainer>
      <Canvas ref={canvasRef} />
    </ParticlesContainer>
  );
};

export default ParticlesBg; 